import React, {useEffect, useState} from 'react'
import { Button, Card, Form, Input, Space, Table, message } from 'antd';
import { SearchOutlined,DeleteOutlined,EditOutlined } from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';
import { HospitalSetItem, ReqGetHospitalSetForm } from '@/api/hospital/hospitalSet/model/hospitalSetTypes';
import { reqBatchRemoveHospital, reqGetHospitalSet, reqRemoveHospitalById } from '@/api/hospital/hospitalSet';
import { Link, useNavigate } from 'react-router-dom';
import { Key } from 'rc-table/lib/interface';
export default function HospitalSet() {
  //状态                                       该类型参数用来约束数组的类型
  let [hospitalSet, setHospitalSet] = useState<HospitalSetItem[]>([]);
  //声明状态管理数据的总数
  let [total, setTotal] = useState<number>(0);
  //当前页码数的状态
  let [current, setCurrent] = useState<number>(1);
  //每页显示数量的状态
  let [pageSize, setPageSize] = useState<number>(5);
  //定义状态 表示表格是否正在加载数据
  let [loading, setLoading] = useState<boolean>(false);
  //定义状态, 表示表单中的值
  let [values, setValues] = useState<ReqGetHospitalSetForm>({});
  let [fresh, setFresh] = useState<boolean>(false);
  //表格选中元素 key 的状态
  let [selectedKeys, setSelectedKeys] = useState<Key[]>([]);
  //获取 navigate 函数
  let navigate = useNavigate();
  //发送请求
  useEffect(() => {
    //声明一个函数
    let getData = async () => {
      //更新状态
      setLoading(true);
      //发送请求获取医院的列表数据
      let result = await reqGetHospitalSet({
        page: current,
        limit: pageSize,
        hoscode: values.hoscode,
        hosname: values.hosname
      });
      //更新状态
      setHospitalSet(result.records);
      //获取总数 更新总数
      setTotal(result.total);
      //
      setLoading(false);
    }
    getData();
  }, [current, pageSize, values, fresh]);

  //表格结构
  let columns: ColumnsType<HospitalSetItem> = [
    {
      title: '序号',
      render: (_, record, index) => {
        return index + 1;
      }
    },
    {
      title: '医院名称',
      dataIndex: 'hosname'
    },
    {
      title: '医院编号',
      dataIndex: 'hoscode'
    },
    {
      title: 'API基础路径',
      dataIndex: 'apiUrl'
    },
    {
      title: '签名',
      dataIndex: 'signKey'
    },
    {
      title: '联系人',
      dataIndex: 'contactsName'
    },
    {
      title: '联系人手机号',
      dataIndex: 'contactsPhone'
    },
    {
      title: '操作',
      fixed: 'right',
      render:(_, record)=>{
        return <Space>
          <Button type="primary" onClick={() => {
            //跳转
            navigate('/syt/hospital/hospitalSet/edit/' + record.id)
          }} icon={<EditOutlined />}></Button>
          <Button onClick={async () => {
            //请求删除
            await reqRemoveHospitalById(record.id);
            message.success('删除成功');
            //更新
            setFresh(!fresh);
          }} danger type='primary' icon={<DeleteOutlined />}></Button>
        </Space>
      }
    },
  ];

  //声明表单提交的回调函数
  let finish = async (values: object) => {
    // console.log(values);
    //更新状态
    setValues(values);
    //更新页码状态值为 1
    setCurrent(1);
  }

  return (
    <Card>
      {/* 表单部分 */}
      <Form
        layout="inline"
        name="basic"
        autoComplete="off"
        onFinish={finish}
      >
        <Form.Item
          name="hosname"
        >
          <Input placeholder='医院名称' />
        </Form.Item>

        <Form.Item
          name="hoscode"
        >
          <Input placeholder='医院编号' />
        </Form.Item>

        <Form.Item>
          <Space>
            <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
              搜索
            </Button>
            <Button>
              清空
            </Button>
          </Space>
        </Form.Item>
      </Form>
      <div className="h-20"></div>
      {/* 两个按钮 */}
      <Space>
        <Link to="/syt/hospital/hospitalSet/add"><Button type='primary'>添加</Button></Link>
        <Button disabled={selectedKeys.length === 0} onClick={async () => {
          //发送请求
          await reqBatchRemoveHospital(selectedKeys)
          //提示
          message.success('删除成功');
          //刷新请求
          setFresh(!fresh);
        }}>批量删除</Button>
      </Space>
      <div className="h-20"></div>
      {/* 表格 */}
      <Table 
        rowSelection={{
          type: 'checkbox', //可选
          onChange: (selectedRowKeys: React.Key[]) => {
            //选中的 key
            // console.log(selectedRowKeys);
            setSelectedKeys(selectedRowKeys);
          }
        }}
        loading={loading}
        rowKey={'id'}
        scroll={{x: 1300}} 
        bordered 
        columns={columns} 
        dataSource={hospitalSet}
        pagination={{
          // 数据的总数
          total: total, 
          // 每页显示的数量
          pageSize: pageSize,
          // 当前的页码数
          current: current,
          //显示调整每页显示数量的组件
          showSizeChanger: true,
          //显示快速跳转
          showQuickJumper: true,
          //每页显示数量的调整
          pageSizeOptions: [5,10,15,20],
          //总数的显示
          showTotal: (total) => {
            return `总计 ${total} 条`;
          },
          //页码数以及每页显示数量发生变化的时候
          onChange: (page: number, pageSize: number) => {
            //更新 current 当前页码数的状态
            setCurrent(page);
            //更新页面显示数量的状态
            setPageSize(pageSize);   
          }
        }}
        />
    </Card>
  )
}
